<template>
    <div id="app" class="user-select">
        <div v-if="!netWork">
            <h3>我没网了</h3>
        </div>
        <router-view v-if="netWork"/>
    </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'

export default {
    computed: {
        ...mapState(['netWork'])
    },
    methods: {
        ...mapMutations(['changeNetwork'])
    },
    mounted () {
        window.addEventListener('offline', () => {
            console.log('已断网')
            this.changeNetwork(false)
        })
        window.addEventListener('online', () => {
            console.log('网络已连接')
            this.changeNetwork(true)
        })
    }
}
</script>
<style>
html, body {
    margin: 0;
    padding: 0;
}

#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100vh;
}
</style>
